<template>
  <div class="home-page">
    <div class="home-header v-flex-row-between border-bottom">
      <div class="logo-wrapper v-flex-row-between">
        <div class="logo-div">
          <img src="/static/image/index/logo.png" alt="">
        </div>
        <div class="home-title v-flex-column-between">
          <div class="home-text">沃创科技</div>
          <div class="certified">
            <img src="/static/image/index/authentication.png" alt="">
          </div>
        </div>
      </div>
      <div class="share-wrapper v-flex-row-between">
        <div class="share-icon"><img src="/static/image/index/transmit.png" alt=""></div>
        <div class="share-icon"><img src="/static/image/index/wechat.png" alt=""></div>
      </div>
    </div>
    <!--swiper-->
    <div class="swiper-wrapper">
      <swiper class="swiper-container" indicator-dots="true" indicator-color="#d0cdd1" indicator-active-color="gray" autoplay="true" interval="3000" circular="true" duration="500">
        <swiper-item class="swiper-item" v-for="(item, index) in imgUrls" :key="index" >
          <image :src="item" class="slide-image" />
        </swiper-item>
      </swiper>
    </div>
    <!--browsing history -->
    <div class="browsing-history-wrapper v-flex-row-between">
        <div class="history-text">
          <span class="history-active-text">5625</span>
          <span class="history-active-text">人</span>
          <span class="history-default-text">看过</span>
          <span>,</span>
          <span class="history-active-text">465</span>
          <span class="history-active-text">人</span>
          <span class="history-default-text">赞过</span>
        </div>
        <div class="v-flex-row-between">
            <div class="v-flex-row-between">
              <div class="item-icon"><img src="/static/mock-image/avatar.jpg" alt=""></div>
              <div class="item-icon"><img src="/static/mock-image/avatar.jpg" alt=""></div>
              <div class="item-icon"><img src="/static/mock-image/avatar.jpg" alt=""></div>
              <div class="item-icon"><img src="/static/mock-image/avatar.jpg" alt=""></div>
            </div>
            <div class="favorite-icon"><img src="/static/image/index/love.png" alt=""></div>
        </div>
    </div>
    <!--热门推荐-->
    <div class="hot-recommend-wrapper">
      <div class="hot-recommend-title v-flex-row-between border-bottom">
        <div class="header-title">热门推荐</div>
        <div class="header-right v-flex-row-between">
          <div class="play-icon">
            <img src="/static/image/index/playing.png" alt="">
          </div>
          <div class="right-text">立即播放</div>
        </div>
      </div>
      <div class="hot-recommend-list">
        <ul class="recommend-list">
          <li class="recommend-item">
            <span class="item-icon-play">
              <img src="/static/image/index/play.png" alt="">
            </span>
            <span class="item-periods">第008期</span>
            <span>要不要给业务骨干升职</span>
          </li>
          <li class="recommend-item">
            <span class="item-icon-play">
              <img src="/static/image/index/play.png" alt="">
            </span>
            <span class="item-periods">第009期</span>
            <span>如何把企业利润做大</span>
          </li>
          <li class="recommend-item">
            <span class="item-icon-play">
              <img src="/static/image/index/play.png" alt="">
            </span>
            <span class="item-periods">第010期</span>
            <span>如何吸引关键人才</span>
          </li>
        </ul>
      </div>
    </div>
    <!--tab切换-->
    <div class="tab-wrapper">
      <div class="tab-switch">
        <ul class="tab-item v-flex-row-around border-bottom">
            <li class="tab-list v-flex-column-center" v-for="(item,index) in tabList" :key="index" @click="tabSwitch(item,index)">
                <div class="tab-name" :class="{active:tabFlag == index}">
                  <span>{{item.name}}</span>
                </div>
                <div class="tab-flag" v-show="tabFlag == index"></div>
            </li>
        </ul>
        <div class="tab-content-wrapper" v-show="tabFlag === 0">
           <div class="tab-content v-flex-row-start" v-for="(item,index) in curriculum" :key="index">
             <div class="curriculum-img">
               <img :src="item.img" alt="">
             </div>
             <div class="curriculum-introduce">
               <div>
                 <div class="curriculum-title">如何激励你的员工000</div>
                 <div class="curriculum-sub-title">推动企业利润快速增长</div>
                 <div class="curriculum-sub-title">2626人学习</div>
               </div>
               <div class="curriculum-price">￥ 5000.00</div>
             </div>
           </div>
        </div>
        <div class="tab-content-wrapper" v-show="tabFlag === 1">
          <div class="tab-content v-flex-row-start" v-for="(item,index) in curriculum" :key="index">
            <div class="curriculum-img">
              <img :src="item.img" alt="">
            </div>
            <div class="curriculum-introduce">
              <div>
                <div class="curriculum-title">如何激励你的员工1111</div>
                <div class="curriculum-sub-title">推动企业利润快速增长</div>
                <div class="curriculum-sub-title">2626人学习</div>
              </div>
              <div class="curriculum-price">￥ 5000.00</div>
            </div>
          </div>
        </div>
        <div class="tab-content-wrapper" v-show="tabFlag === 2">
          <div class="tab-content v-flex-row-start" v-for="(item,index) in curriculum" :key="index">
            <div class="curriculum-img">
              <img :src="item.img" alt="">
            </div>
            <div class="curriculum-introduce">
              <div>
                <div class="curriculum-title">如何激励你的员工2222</div>
                <div class="curriculum-sub-title">推动企业利润快速增长</div>
                <div class="curriculum-sub-title">2626人学习</div>
              </div>
              <div class="curriculum-price">￥ 5000.00</div>
            </div>
          </div>
        </div>
        <div class="tab-content-wrapper" v-show="tabFlag === 3">
          <div class="about-as-wrapper">
            <div class="about-as-title">沃创科技</div>
            <div class="corporation-info border-bottom">
              <div>
                <span>联系方式：</span>
                <span class="theme-color">0591-83610829</span>
              </div>
              <div>
                公司地址：福建省福州市台江区鳌江路3号升龙汇金中心1112室
              </div>
            </div>
            <!--公司简介-->
            <div class="corporation-intro">
              <div class="corporation-info-main border-bottom">
                <div class="intro-title">公司简介</div>
                <div class="intro-main">
                  <span class="circle-style"></span>
                  <span class="intro-main-title">公司核心价值观：诚信尽责，进取向上，互助协作，使命必达。</span>
                </div>
                <div class="intro-main">
                  <span class="circle-style"></span>
                  <span class="intro-main-title">公司愿景：让我们一起成长，一起成为行业领袖。</span>
                </div>
              </div>
              <div class="intro-content">
                <p class="paragraph">福州市沃创智能科技有限公司成立于2015年。初创团队经过长期的探索与努力，如今已成长为一家以支付为核心业务、银行卡收单及维护、增值服务、应用技术系统研发等业务于一身的综合移动创新支付服务集团。</p>
                <p class="paragraph">沃创科技目前服务于300万中小微商户，银行卡收单交易量全省前三，拥有瑞银信全国代理权、盒子支付福建省代理权，并与数百家商业机构建立了长期稳定的合作关系。</p>
                <p class="paragraph">面对市场竞争与需求演进，沃创科技持续加强科技投入、强化创新能力，以“技术创新”与“客户思维”满足多层次市场需求。公司拥有优秀的自主研发能力，并积极应用大数据技术，为小微企业提供更精准高效的综合移动创新支付服务。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--新用户领取优惠券弹层-->
    <popup></popup>
    <!--购物车图标-->
    <div class="shopping-cart-icon" @click="toCart">
      <img src="/static/image/index/shopping-cart.png" alt="">
    </div>
    <div class="base-line"><span class="line"></span>我是有底线的<span class="line"></span></div>
    <!-- 底部tabBar -->
    <div class="home_footer">
      <tab-bar selected="1"></tab-bar>
    </div>
  </div>
</template>

<script>
import tabBar from 'components/tabBar/tabBar';
import Popup from 'pages/index/popup'; // 领取优惠券弹层
export default {
  name: 'Home',
  data () {
    return {
      imgUrls:[
        'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg',
        'http://res.youtenet.com/bdbData/r/gou/u/201807/04141549nl52.jpg'
      ],
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000,
      tabFlag: 0,
      tabList:[
        { id:"002",name:'个人提升'},
        { id:"001",name:'团队管理'},
        { id:"001",name:'培训管理'},
        { id:"001",name:'关于我们'}
      ],
      curriculum:[
        {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'},
        {img:'http://res.518.fm/bdbData/r/gou//u/201712/29211356eka3.jpg'},
        {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'},
        {img:'http://res.518.fm/bdbData/r/gou//u/201712/29211356eka3.jpg'},
        {img:'http://res.youtenet.com/bdbData/r/gou/u/201806/041349208m7b.jpg'}
      ]
    }
  },
  methods: {
    tabSwitch (item,index) {
      this.tabFlag = index;
      wx.showLoading({
        title: '加载中',
      })
      setTimeout(function () {
        wx.hideLoading()
      }, 1000)
    },
    // 跳转到购物车
    toCart () {
      this.$router.push({path:'/pages/cart/cart'})
    }
  },
  components: {
    tabBar,
    Popup
  }
}
</script>
<style scoped lang="less">
  .home-page {
    padding-bottom:132rpx;
  }
  .home-header {
    height: 94rpx;
    background-color: @bg_color;
    padding: 0px 15px 0px 10px;
    .logo-wrapper{
      & > .logo-div {
        width: 95rpx;
        height: 75rpx;
        & > img {
          width: 95rpx;
          height: 75rpx;
        }
      }
      .home-title {
        .home-text {
          font-size: 28rpx;
          color: #000;
          font-weight:bold;
        }
        .certified {
          & > img {
            width: 59rpx;
            height: 19rpx;
          }
        }
      }
    }
    .share-wrapper {
      .share-icon {
        padding: 0px 32rpx;
        & > img {
          width:33rpx;
          height:26rpx;
        }
      }
    }
  }
  /*swiper*/
  .swiper-wrapper {
    width: 100%;
    margin: 0 auto;
    background-color:#fff;
    padding: 10px 10px 0px 10px;
    box-sizing:border-box;
  }
  .swiper-wrapper .swiper-item image {
    width: 710rpx;
    height: 300rpx;
  }
  .browsing-history-wrapper {
    width: 100%;
    height: 85rpx;
    margin: 0 auto;
    background-color:#fff;
    padding: 20rpx 20rpx 0rpx 20rpx;
    box-sizing:border-box;
  }
  .history-text {
    font-size:@font_size_24;
  }
  .favorite-icon {
    width:39rpx;
    height:34rpx;
    padding-left:22rpx;
    & > img {
      width:39rpx;
      height:34rpx;
    }
  }
  .item-icon {
    width: 48rpx;
    height: 48rpx;
    padding: 0px 4px;
    & > img {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
    }
  }
  .history-active-text {
    color:#2B80FF;
  }
  .history-default-text {
    color: #333;
  }

  /*热门推荐*/
  .hot-recommend-wrapper {
    margin-top:10px;
    background-color:#fff;
  }
  .hot-recommend-title {
    padding:14px 17px 14px 10px;
    .header-title {
      font-size:28rpx;
      font-weight:bold;
    }
  }
  .header-right {
    box-sizing:border-box;
    .right-text {
      color:@theme_color;
      font-size:24rpx;
      padding:0px 3px;
    }
    .play-icon {
      width: 26rpx;
      height:26rpx;
      & > img {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }
  /*推荐内容*/
  .recommend-list {
    padding-bottom:10rpx;
    font-size:@font_size_28;
  }
  .recommend-item {
    box-sizing:border-box;
    padding:15rpx 20rpx;
    vertical-align:middle;
    color:#333;
    font-size:@font_size_28;
    & > span {
      display:inline-block;
    }
    .item-icon-play > img {
      width:26rpx;
      height:26rpx;
      vertical-align:-2px;
    }
    .item-periods {
      padding: 0px 17px 0px 10px;
    }
  }
  /* tab 切换*/
  .tab-wrapper {
    margin-top:10px;
    background-color:#fff;
  }
  .tab-name {
    font-size:@font_size_28;
  }
  .tab-list {
    padding:12rpx 0rpx;
    position:relative;
  }
  .tab-item{
    padding:12rpx 0px;
    color:@font_gray_color;
  }
  .tab-flag {
    width:38rpx;
    height:5rpx;
    background-color:@theme_bg_color;
    position:absolute;
    bottom:0px;
    left:50%;
    transform: translate(-50%,0);
  }
  .active {
    color:#333;
  }
  .tab-content {
    padding:26rpx 20rpx;
    .curriculum-img {
      width: 300rpx;
      height:170rpx;
      & > img {
        width: 300rpx;
        height:170rpx;
        border-radius:10rpx;
      }
    }
  }
  .curriculum-introduce {
    padding:0px 20rpx;
  }
  .curriculum-title {
    color:#333;
    font-size:@font_size_28;
    font-weight:bold;
  }
  .curriculum-sub-title {
    font-size:@font_size_24;
    color:#B3B4B5;
  }
  .curriculum-price {
    color:#FF5050;
    font-size:@font_size_32;
  }
  .line{
    display:inline-block;
    width:22px;
    height:1px;
    background-color:#D1D1D1;
    vertical-align: middle;
  }
  .base-line {
    font-size:@font_size_20;
    text-align:center;
    color:#D1D1D1;
    margin:0 auto;
    padding:20rpx 0rpx;
  }
  .shopping-cart-icon {
    width:128rpx;
    height:128rpx;
    position:fixed;
    right:11rpx;
    bottom:212rpx;
    & > img {
      width:128rpx;
      height:128rpx;
    }
  }
  /*关于我们*/
  .about-as-wrapper {
    /*box-sizing: border-box;*/
    /*padding:47rpx 30rpx 57rpx 30rpx;*/
    text-align: left;
    font-size:@font_size_24;
  }
  .about-as-title {
    padding-top:47rpx;
    font-size:@font_size_28;
    font-weight:bold;
    text-align:center;
  }
  .theme-color {
    color:@theme_bg_color;
  }
  .corporation-info {
    box-sizing: border-box;
    padding:34rpx 30rpx 40rpx 30rpx;
    text-align: left;
    line-height:48rpx;
  }
  .corporation-info-main {
    box-sizing: border-box;
    padding:36rpx 30rpx;
    line-height:48rpx;
  }
  .circle-style {
    display:inline-block;
    width:8rpx;
    height:8rpx;
    background:@theme_bg_color;
    border-radius:50%;
  }
  .intro-main-title {
    padding-left:6rpx;
    vertical-align: middle;
  }
  .intro-content {
    padding:42rpx 30rpx 42rpx 30rpx;
  }
  .paragraph {
    text-indent:50rpx;
    line-height:48rpx;
  }
</style>
